<template>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#262A32"
      text-color="#fff"
      active-text-color="#fff"
      :collapse="collapse"
      router
      :collapse-transition="false"
    >
    <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">管理中心</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统设置</span>
        </template>
        <!-- 实现页面的跳转除了在index这里加上路径以外，还需要在跟标签加上router -->
          <el-menu-item index="/layout/menu">菜单管理</el-menu-item>
          <el-menu-item index="/layout/role">角色管理</el-menu-item>
          <el-menu-item index="/guan">管理员管理</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-goods"></i>
          <span>商城管理</span>
        </template>
          <el-menu-item index="/categroy">分类管理</el-menu-item>
          <el-menu-item index="/goods">商品管理</el-menu-item>
          <el-menu-item index="/specs">规格管理</el-menu-item>
          <el-menu-item index="3-4">秒杀活动</el-menu-item>
          <el-menu-item index="3-5">会员管理</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>数据统计</span>
        </template>
          <el-menu-item index="/echarts">统计</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-share"></i>
          <span>功能演示</span>
        </template>   
          <el-menu-item index="/tiao">饼状图</el-menu-item>
      </el-submenu>
    </el-menu>
</template>

<script>
// 导入vue辅助方法
import {mapState,mapMutations} from 'vuex'
export default {
  //父向子传值的第二步
  props:['collapse'],
  computed:{
    // 将vuex中的数据映射到组件中
    ...mapState(['menus'])
  },
        methods: {
          // 将vuex中的mapMutations方法映射到组件中
          ...mapMutations(['menusInit']),
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    // 在生命周期中调用
    created(){
      // 初始化菜单
      const userInfo =JSON.parse(sessionStorage.getItem('userinfo') || '{}')
      // 更新vuex 存储对象中的menus
      this.menusInit(userInfo.menus)
    }

};
</script>

<style lang='less' scoped>
.el-menu{
    height: calc(100% - 60px);
    text-align: left;
    border-right: 0;
}
</style>